<div id="content">
  <div class="row s_page_title">
    <sa-big-breadcrumbs
      [items]="['物料跟踪管理', '基础信息维护', 'BOM编码管理（全）']"
      icon="fa-lg fa-fw fa fa-cubes"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"
    ></sa-big-breadcrumbs>
  </div>
  <sa-widgets-grid>
    <div class="s_table">
      <div sa-widget [editbutton]="false" color="darken" class="clearfix">
        <header>
          <span class="widget-icon"><i class="fa fa-table"></i></span>
          <h2>BOM编码管理（全）</h2>
        </header>
        <div>
          <div class="widget-body no-padding">
            <div class="page-header clearfix s_table_opreation">
              <div class="left page-header-btn">
                <div class="top_module cancle">
                  <span class="module_text">BOM编码</span>
                  <input
                    type="text"
                    class="module_inp top_module_select ng-pristine ng-valid ng-touched"
                    placeholder="BOM编码"
                    [(ngModel)]="bomNumber"
                  />
                  <div class="s_del_icon" (click)="delKey('bomNumber')">x</div>
                </div>
                <div class="top_module cancle">
                  <span class="module_text">BOM名称</span>
                  <input
                    type="text"
                    class="module_inp top_module_select ng-pristine ng-valid ng-touched"
                    placeholder="BOM名称"
                    [(ngModel)]="bomName"
                  />
                  <div class="s_del_icon" (click)="delKey('bomName')">x</div>
                </div>
                <div class="selectDate top_module">
                  <table-select-date [notInit]="true" (outerTime)="datePickerSelected($event)"></table-select-date>
                </div>
                <button type="button" class="btn btn-primary" (click)="tableSearch()">查询</button>
                <button type="button" class="btn btn-primary" (click)="showImportModal(weightModal)">
                  导入Excel文件
                </button>
                <button type="button" class="btn btn-primary" (click)="showImportModal(aliasModal)">别称导入</button>
              </div>
            </div>
            <div class="table_scroll">
              <table
                class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
              >
                <thead>
                  <tr>
                    <th>BOM编码</th>
                    <th>BOM名称</th>
                    <th>描述</th>
                    <th>创建人</th>
                    <th>创建时间</th>
                    <th>编辑人</th>
                    <th>编辑时间</th>
                    <th>操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    *ngFor="let row of tableData"
                    [ngClass]="{ selected: activeSelected === row.id }"
                    (dblclick)="detail_domCode(row, row.id, BomCodeDetail)"
                  >
                    <td>{{ row.bomNumber }}</td>
                    <td>{{ row.bomName }}</td>
                    <td>{{ row.describe }}</td>
                    <td>{{ row.createUser }}</td>
                    <td>{{ row.createTime }}</td>
                    <td>{{ row.updateUser }}</td>
                    <td>{{ row.updateTime }}</td>
                    <td>
                      <button type="button" (click)="detail_domCode(row, row.id, BomCodeDetail)">查看</button>
                      <button type="button" (click)="del_domCode(row)">删除</button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div class="table-fix clearfix">
              <paginator
                [totalRecords]="totalCounts"
                [rows]="pageSize"
                [currentPage]="curPage - 1"
                (onPageChange)="paginate($event)"
              ></paginator>
              <button type="button" class="btn default refresh_btn" (click)="refresh()">
                <i class="fa fa-refresh"></i>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </sa-widgets-grid>
</div>

<!-- BOM编码详情弹框 -->
<div
  bsModal
  #BomCodeDetail="bs-modal"
  id="BomCodeDetail"
  class="modal bomCodeDetail fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
  data-backdrop="static"
  data-keyboard="false"
>
  <div class="modal-dialog modal-lg" style="width: 900px">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="closeDetailModal(BomCodeDetail)" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">物料组合</h4>
      </div>
      <div class="modal-body">
        <div style="padding-bottom: 10px">
          <div class="bomTitleWrap">
            <h3 class="col-sm-2">BOM编码:</h3>
            <span style="margin-bottom: 10px" class="col-sm-9">{{ BomCodeInfo.bomNumber || '--' }}</span>
          </div>
          <div class="bomTitleWrap">
            <h3 class="col-sm-2">BOM名称:</h3>
            <span style="margin-bottom: 10px" class="col-sm-9">{{ BomCodeInfo.bomName || '--' }}</span>
          </div>
          <div class="bomTitleWrap">
            <h3 class="col-sm-2">描 述:</h3>
            <span class="col-sm-9">{{ BomCodeInfo.describe || '--' }}</span>
          </div>
        </div>
        <div class="border"></div>
        <div class="infoWrap">
          <div class="table_scroll">
            <table
              class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table"
            >
              <thead>
                <tr>
                  <th>物料编码</th>
                  <th>物料名称</th>
                  <th>规格型号</th>
                  <th>单位</th>
                  <th>单位用量</th>
                  <th>用量</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let row of BomCodeInfo.list">
                  <td>{{ row.materielNumber }}</td>
                  <td>{{ row.materielName }}</td>
                  <td>{{ row.specifications }}</td>
                  <td>{{ row.unit }}</td>
                  <td style="text-align: center">{{ row.unitConsumption }}</td>
                  <td style="text-align: center">{{ row.record }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- BOM编码详情  结束 -->

<!-- 导入Excel弹框 -->
<div
  bsModal
  #weightModal="bs-modal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="cancelUp(weightModal)" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">上传Excel文件</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <form class="form form-inline" role="form">
            <div class="row">
              <div class="col-sm-10" style="padding: 0">
                <div class="clearfix module_line">
                  <button type="button" class="btn btn-primary" style="width: 120px">
                    上传模板文件
                    <input
                      type="file"
                      class="up"
                      (change)="fileChange($event.target.files)"
                      name="fileToUpload"
                      (click)="clearFile()"
                      [(ngModel)]="fileUp"
                      placeholder=""
                      multiple="multiple"
                    />
                  </button>
                  <span class="row" class="note">注：可一次性添加多份文件, 格式excel</span>
                </div>
              </div>
            </div>
            <div *ngIf="fileToUpload.length > 0">
              <label class="control-label col-sm-1"></label>
              <div>
                <ul style="max-height: 321px; overflow-y: auto">
                  <li class="file_list" *ngFor="let file of fileToUpload">
                    <i class="fa fa-file-text-o" style="margin-right: 12px"></i>
                    {{ file.name }}
                    <i class="fa fa-check-circle green" style="margin-left: 60px"></i>
                  </li>
                </ul>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="cancelUp(weightModal)">取消</button>
        <button type="button" class="btn btn-primary" (click)="submitData(weightModal)">确认</button>
      </div>
    </div>
  </div>
</div>
<!-- 导入弹框 结束 -->
<!-- 导入Excel弹框 -->
<div
  bsModal
  #aliasModal="bs-modal"
  class="modal fade"
  tabindex="-1"
  role="dialog"
  aria-labelledby="myLargeModalLabel"
  aria-hidden="true"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="cancelUp(aliasModal)" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">上传Excel文件</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <form class="form form-inline" role="form">
            <div class="row">
              <div class="col-sm-10" style="padding: 0">
                <div class="clearfix module_line">
                  <button type="button" class="btn btn-primary" style="width: 120px">
                    上传模板文件
                    <input
                      type="file"
                      class="up"
                      (change)="aliasFileChange($event.target.files)"
                      name="aliasFileToUpload"
                      (click)="clearAliasFile()"
                      [(ngModel)]="aliasFileUp"
                      placeholder=""
                      multiple="multiple"
                    />
                  </button>
                  <span class="row" class="note">注：可一次性添加多份文件, 格式excel</span>
                </div>
              </div>
            </div>
            <div *ngIf="aliasFileToUpload.length > 0">
              <label class="control-label col-sm-1"></label>
              <div>
                <ul style="max-height: 321px; overflow-y: auto">
                  <li class="file_list" *ngFor="let file of aliasFileToUpload">
                    <i class="fa fa-file-text-o" style="margin-right: 12px"></i>
                    {{ file.name }}
                    <i class="fa fa-check-circle green" style="margin-left: 60px"></i>
                  </li>
                </ul>
              </div>
            </div>
          </form>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" (click)="cancelUp(aliasModal)">取消</button>
        <button type="button" class="btn btn-primary" (click)="submitAliasData(aliasModal)">确认</button>
      </div>
    </div>
  </div>
</div>
<!-- 导入弹框 结束 -->
